/*
  学习目标：组件性能优化
1. 功能第一
2. 性能优化

避免不必要的重新渲染
+  组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
   + 问题：子组件没有任何变化时也会重新渲染 （接收到的props没有发生任何的改变）
+  如何避免不必要的重新渲染呢？
   +  解决方式：使用钩子函数 `shouldComponentUpdate(nextProps, nextState)`

   +  作用：通过返回值决定该组件是否重新渲染，返回 true 表示重新渲染，false 表示不重新渲染
   +  触发时机：更新阶段的钩子函数，组件重新渲染前执行 （shouldComponentUpdate => render）
*/
import React, { Component } from 'react'

export default class App extends Component {
    state = {
        count: 0,
        mag: ''
    };

    handleClick = () => {
        this.setState({ count: this.state.count + 1 });
    };
    handleClickMsg = () => {
        this.setState({ mag: this.state.mag + 1 });
    };
    render() {
        // console.log('只执行一次');
        return (
            <div>
                <h1>数量： {this.state.count}</h1>
                <button onClick={this.handleClick}>点我修改数量</button>
                <button onClick={this.handleClickMsg}>点我修改msg</button>
                <Footer count={this.state.count}></Footer>
            </div>
        )
    }
}
class Footer extends React.Component {
    shouldComponentUpdate(nextProps) {
        // shouldComponentUpdate在render之前执行，this.props.count代表更新前的旧值
        console.log('更新前的旧值', this.props.count);
        console.log('新值', (nextProps.count))
        // 比较有效的props更新，返回false表示不允许更新
        return this.props.count !== nextProps.count
    }
    render() {
        console.log('更新了');
        const { count } = this.props
        return <div>我是Footer:{count}</div>;
    }
}